<!-- 歌曲详情 -->
<template>
  <img :src="musicList.al.picUrl" alt="" class="bgimg" />
  <div class="detailTop">
    <div class="detailTopLeft">
      <svg class="icon position" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="name-icon">
        <Vue3Marquee style="color:aliceblue"><p>{{ musicList.al.name }}</p></Vue3Marquee>
        <span v-for="(item, index) in musicList.ar" :key="index">
          {{ item.name }}
        </span>
        <svg class="icon position" aria-hidden="true">
          <use xlink:href="#icon-xiangyoujiantou"></use>
        </svg>
      </div>
    </div>
    <div class="detailTopRight">
      <svg class="icon position" aria-hidden="true">
        <use xlink:href="#icon-fenxiang2"></use>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ['musicList'],
  data() {
    return {}
  },
  mounted() {
    console.log(this.musicList)
  },
}
</script>

<style lang="less" scoped>
.bgimg {
  width: 99%;
  height: 99%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}
.detailTop {
  width: 100%;
  height: 100%;
  padding: 0.4rem 0.2rem;
  display: flex;
  .detailTopLeft {
    width: 80%;
    display: flex;
    .name-icon {
      position: relative;
      left: 0.5rem;
      p {
        color: aliceblue;
        font-size: 0.35rem;
      }
      span {
        font-size: 0.26rem;
        color: #d4e1e4;
      }
      .icon {
        width: 0.24rem;
        height: 0.24rem;
      }
    }
    .icon {
      color: aliceblue;
    }
  }
  .detailTopRight {
    width: 20%;
    text-align: right;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      color: aliceblue;
    }
  }
}
</style>
